<template>
  <div class="footer">
    <li v-for="(item,index) in footerList" :key="index"
        @click.stop="getLocation(item.RouteTo)"
        :class="item.state?'exact-active-link':''">
      <img :src="item.state?item.YesImg:item.NoImg" alt="">
      <span>{{item.text}}</span>
    </li>
  </div>
</template>

<script>
  export default {
    name: "app-footer",
    data() {
      return {
        footerList: [{
          state: true,
          RouteTo: "/index/home",
          text: this.$t('home'),
          YesImg: require("../../assets/img/loanSelect.png"),
          NoImg: require("../../assets/img/loan.png")
        },
          {
            state: false,
            RouteTo: "/index/mine",
            text: this.$t('mine'),
            YesImg: require("../../assets/img/mineSelect.png"),
            NoImg: require("../../assets/img/mine.png")
          }]
      }
    },
    created(options) {
      this.routeActive();
    },
    methods: {
      getLocation(route) {
        if (this.$route.fullPath != route) {
          this.$router.replace({
            path: route
          });
        }
      },
      routeActive() {
        for (var i = 0; i < this.footerList.length; i++) {
          this.footerList[i].state = false;
          if (this.$route.fullPath == this.footerList[i].RouteTo) {
            this.footerList[i].state = true;
          }
        }
      }
    },
    watch: {
      $route(to, from) {
        this.routeActive();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    width: 100%;
    height: 48px;
    background: white;
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;

    li {
      flex: 1;
      width: auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: #000;
      img {
        width: 27px;
        height: 27px;
      }
    }
    .exact-active-link {
      color: red;
    }
  }
</style>
